<template>
  <Card>
    <el-form style="margin-top: 20px" v-model="coupon" label-width="120px" class="demo-ruleForm" status-icon>
      <el-form-item label="优惠券名称" prop="name">
        <el-input style="height: 40px" v-model="coupon.couponName" />
      </el-form-item>

      <el-form-item label="优惠券类型" prop="resource" style="margin: 20px 0">
        <el-radio-group v-model="coupon.couponTypeString">
          <el-radio label="现金券" />
          <el-radio label="折扣券" />
          <el-radio label="满减券" />
          <el-radio label="满量打折券" />
        </el-radio-group>
      </el-form-item>

      <el-form-item label="最多领用次数" prop="name">
        <el-input style="height: 40px" v-model="coupon.limitNum" />
      </el-form-item>

      <el-form-item label="领取时间" style="margin: 30px 0">
        <el-date-picker v-model="coupon.createTime" :span="10" style="width: 40%; height: 40px" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="{ disabledDate }"> </el-date-picker>
      </el-form-item>

      <div class="demo-datetime-picker">
        <div class="block" style="margin-left: 50px">
          <span class="demonstration">过期时间</span>
          <el-date-picker style="margin-left: 10px" type="datetime" placeholder="Select date and time" v-model="coupon.endTime" />
        </div>
      </div>

      <el-form-item style="margin-top: 30px">
        <el-button type="primary" @click="addCoupon">保存</el-button>
        <el-button @click="goCouponList">取消</el-button>
      </el-form-item>
    </el-form>
  </Card>
</template>

<script lang="ts">
export default {
  name: "CouponForm",
};
</script>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import type { CouponInfoModel } from "@/api/model/couponModel";
//引入接口函数
import { reqAddCoupon } from "@/api/coupon";


//接受父组件传过来的自定义事件
const emits = defineEmits(["setShowStatus"]);

//定义一个对象，用来存储添加优惠券
const coupon = reactive<CouponInfoModel>({
  couponName: "", //购物券名称
  couponTypeString: "", //购物券类型
  limitNum: 0, //最多领用次数
  endTime: "", //过期时间
  createTime: "", //创建时间
  isChecked: 0, //是否选中
});

const startEnd = ref<any>({}); // 开始结束时间
//禁用当天之后的时间选择, 返回true是禁用
const disabledDate = (time: any) => {
  return time.getTime() > Date.now();
};

//点击取消的回调
const goCouponList = () => {
  //跳到列表页面
  emits("setShowStatus", 1);
};

//点击保存的回调
const addCoupon = async (coupon: CouponInfoModel) => {
  let result = await reqAddCoupon(coupon);
   //跳到列表页面
   emits("setShowStatus", 1);
   ElMessage({
        //点击确定的回调
        type: "success",
        message: "添加成功",
      });
};
</script>

<style scoped></style>
